<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家政小程序商学院 - 课程分类</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }
        .scroll-x {
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }
        .scroll-x::-webkit-scrollbar {
            display: none;
        }
        .course-card {
            transition: all 0.3s ease;
        }
        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .star-rating {
            color: #ffc107;
        }
        .tab-active {
            color: #4f46e5;
            border-bottom: 2px solid #4f46e5;
        }
    </style>
</head>
<body class="pb-16">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="flex items-center p-4">
            <button class="mr-3 text-gray-600" onclick="window.history.back()">
                <i class="fas fa-chevron-left text-xl"></i>
            </button>
            <h1 class="text-xl font-bold flex-1 text-center">课程分类</h1>
            <button class="ml-3 text-gray-600">
                <i class="fas fa-search text-lg"></i>
            </button>
        </div>
    </header>

    <!-- 搜索框 -->
    <div class="px-4 mt-2">
        <div class="relative">
            <input type="text" placeholder="搜索课程名称或关键词" 
                   class="w-full py-2 pl-10 pr-4 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
            <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
        </div>
    </div>

    <!-- 分类导航 -->
    <div class="mt-4 px-4">
        <div class="scroll-x py-2">
            <div class="inline-flex space-x-4">
                <button class="px-4 py-1 bg-indigo-100 text-indigo-600 rounded-full font-medium whitespace-nowrap">全部课程</button>
                <button class="px-4 py-1 bg-gray-100 text-gray-600 rounded-full font-medium whitespace-nowrap">保洁技巧</button>
                <button class="px-4 py-1 bg-gray-100 text-gray-600 rounded-full font-medium whitespace-nowrap">收纳整理</button>
                <button class="px-4 py-1 bg-gray-100 text-gray-600 rounded-full font-medium whitespace-nowrap">育儿护理</button>
                <button class="px-4 py-1 bg-gray-100 text-gray-600 rounded-full font-medium whitespace-nowrap">老人照料</button>
                <button class="px-4 py-1 bg-gray-100 text-gray-600 rounded-full font-medium whitespace-nowrap">烹饪技巧</button>
                <button class="px-4 py-1 bg-gray-100 text-gray-600 rounded-full font-medium whitespace-nowrap">家电维护</button>
            </div>
        </div>
    </div>

    <!-- 筛选区域 -->
    <div class="mt-4 px-4">
        <div class="bg-white rounded-lg shadow-sm p-3">
            <div class="grid grid-cols-3 gap-4">
                <div class="relative">
                    <select class="appearance-none w-full pl-3 pr-8 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500 text-sm">
                        <option>学科分类</option>
                        <option>保洁技巧</option>
                        <option>收纳整理</option>
                        <option>育儿护理</option>
                    </select>
                    <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 text-xs"></i>
                </div>
                <div class="relative">
                    <select class="appearance-none w-full pl-3 pr-8 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500 text-sm">
                        <option>课程类型</option>
                        <option>视频课程</option>
                        <option>图文课程</option>
                        <option>直播课程</option>
                    </select>
                    <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 text-xs"></i>
                </div>
                <div class="relative">
                    <select class="appearance-none w-full pl-3 pr-8 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500 text-sm">
                        <option>价格区间</option>
                        <option>免费</option>
                        <option>0-99元</option>
                        <option>100-299元</option>
                        <option>300元以上</option>
                    </select>
                    <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 text-xs"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 排序选项 -->
    <div class="mt-4 px-4">
        <div class="flex justify-between items-center">
            <div class="text-sm text-gray-500">共128门课程</div>
            <div class="flex space-x-4">
                <button class="text-sm font-medium text-gray-600">最新</button>
                <button class="text-sm font-medium text-gray-600">最热</button>
                <button class="text-sm font-medium text-gray-600">价格</button>
            </div>
        </div>
    </div>

    <!-- 课程列表 -->
    <div class="mt-4 px-4">
        <div class="grid grid-cols-2 gap-4">
            <!-- 课程卡片1 -->
            <div class="course-card bg-white rounded-lg overflow-hidden shadow">
                <div class="relative">
                    <img src="https://s.coze.cn/image/WcGn5KZPKoc/" alt="家政保洁技巧" class="w-full h-40 object-cover">
                    <div class="absolute top-2 right-2 bg-white bg-opacity-90 rounded-full px-2 py-1 text-xs font-medium">
                        <i class="fas fa-play-circle text-indigo-500 mr-1"></i>视频
                    </div>
                </div>
                <div class="p-3">
                    <h3 class="font-bold text-sm line-clamp-2">现代家庭深度保洁技巧全攻略</h3>
                    <p class="text-xs text-gray-500 mt-1">讲师: 张老师</p>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-red-500 font-bold">¥99</div>
                        <div class="flex items-center">
                            <div class="star-rating text-xs">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span class="text-xs text-gray-500 ml-1">128人</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 课程卡片2 -->
            <div class="course-card bg-white rounded-lg overflow-hidden shadow">
                <div class="relative">
                    <img src="https://s.coze.cn/image/EH90HUas7SY/" alt="收纳整理" class="w-full h-40 object-cover">
                    <div class="absolute top-2 right-2 bg-white bg-opacity-90 rounded-full px-2 py-1 text-xs font-medium">
                        <i class="fas fa-images text-indigo-500 mr-1"></i>图文
                    </div>
                </div>
                <div class="p-3">
                    <h3 class="font-bold text-sm line-clamp-2">日本收纳整理术：小空间大利用</h3>
                    <p class="text-xs text-gray-500 mt-1">讲师: 李老师</p>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-red-500 font-bold">¥199</div>
                        <div class="flex items-center">
                            <div class="star-rating text-xs">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span class="text-xs text-gray-500 ml-1">256人</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 课程卡片3 -->
            <div class="course-card bg-white rounded-lg overflow-hidden shadow">
                <div class="relative">
                    <img src="https://s.coze.cn/image/8RdvBGqR-EI/" alt="育儿护理" class="w-full h-40 object-cover">
                    <div class="absolute top-2 right-2 bg-white bg-opacity-90 rounded-full px-2 py-1 text-xs font-medium">
                        <i class="fas fa-video text-indigo-500 mr-1"></i>直播
                    </div>
                </div>
                <div class="p-3">
                    <h3 class="font-bold text-sm line-clamp-2">0-3岁婴幼儿日常护理全指南</h3>
                    <p class="text-xs text-gray-500 mt-1">讲师: 王老师</p>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-red-500 font-bold">¥299</div>
                        <div class="flex items-center">
                            <div class="star-rating text-xs">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <span class="text-xs text-gray-500 ml-1">512人</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 课程卡片4 -->
            <div class="course-card bg-white rounded-lg overflow-hidden shadow">
                <div class="relative">
                    <img src="https://s.coze.cn/image/4wnz1X0huvY/" alt="老人照料" class="w-full h-40 object-cover">
                    <div class="absolute top-2 right-2 bg-white bg-opacity-90 rounded-full px-2 py-1 text-xs font-medium">
                        <i class="fas fa-play-circle text-indigo-500 mr-1"></i>视频
                    </div>
                </div>
                <div class="p-3">
                    <h3 class="font-bold text-sm line-clamp-2">老年人日常照料与健康管理</h3>
                    <p class="text-xs text-gray-500 mt-1">讲师: 赵老师</p>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-red-500 font-bold">¥159</div>
                        <div class="flex items-center">
                            <div class="star-rating text-xs">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span class="text-xs text-gray-500 ml-1">384人</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载更多 -->
    <div class="mt-6 px-4">
        <button class="w-full py-3 bg-white border border-gray-200 rounded-lg text-gray-600 font-medium hover:bg-gray-50">
            加载更多课程
        </button>
    </div>

    <!-- 底部导航 -->
    <!-- <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200" style="max-width: 750px; margin: 0 auto;">
        <div class="flex justify-around py-2">
            <a href="#" class="flex flex-col items-center text-indigo-600">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="#" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-book text-xl"></i>
                <span class="text-xs mt-1">课程</span>
            </a>
            <a href="#" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-comments text-xl"></i>
                <span class="text-xs mt-1">社区</span>
            </a>
            <a href="#" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div> -->

    <script>
        // 分类导航点击效果
        document.querySelectorAll('.scroll-x button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.scroll-x button').forEach(btn => {
                    btn.classList.remove('bg-indigo-100', 'text-indigo-600');
                    btn.classList.add('bg-gray-100', 'text-gray-600');
                });
                this.classList.remove('bg-gray-100', 'text-gray-600');
                this.classList.add('bg-indigo-100', 'text-indigo-600');
            });
        });

        // 排序选项点击效果
        document.querySelectorAll('.flex.justify-between button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.flex.justify-between button').forEach(btn => {
                    btn.classList.remove('text-indigo-600', 'font-bold');
                });
                this.classList.add('text-indigo-600', 'font-bold');
            });
        });
    </script>
</body>
</html>